<template>
  <div>
    <div class="header-btn">
      <div>会话留存</div>
    </div>
    <div class="container">
      <div class="user-list">
        <div class="user-item" :class="{ 'actived': activedIndex1 === index }" @click="chooseUser(item, index)"
          v-for="(item, index) in customerList" :key="item.userId">
          <el-avatar :size="40" :src="item.headImageUrl"></el-avatar>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="customer-list">
        <div class="top-con">
          <el-radio-group v-model="customer" @change="changeCustomer">
            <el-radio-button label="1">好友</el-radio-button>
            <el-radio-button label="2">群聊</el-radio-button>
          </el-radio-group>
          <div style="width: 220px; margin: auto">
            <el-input v-model="nickName" placeholder="请输入" suffix-icon="el-icon-search"
              @change="changeCustomer"></el-input>
          </div>
          <div class="customer-con">
            <div class="customer-item" :class="{ 'actived': activedIndex2 === index }" v-for="(item, index) in bondList" :key="item.userId" @click="userBond(item, index)">
              <!-- 好友 -->
              <template v-if="customer === '1'">
                <el-avatar shape="square" :size="40" :src="item.avatar"></el-avatar>
                <template v-if="item.name.length > 5">
                  <el-tooltip placement="top" title=" " width="300" height="36" trigger="hover" :content="item.name">
                    <span class="user-name" style="max-width:90px;">{{ item.name }}</span>
                  </el-tooltip>
                </template>
                <span class="user-name" v-else>{{ item.name }}</span>
                <span class="user-company">@微信</span>
              </template>
              <!-- 群聊 -->
              <template v-else>
                <span class="group-name">群聊</span>
                <template v-if="item.groupName.length > 5">
                  <el-tooltip placement="top" title=" " width="300" height="36" trigger="hover" :content="item.groupName">
                    <span class="user-name" style="width:90px;">{{ item.groupName }}</span>
                  </el-tooltip>
                </template>
                <span class="user-name" v-else>{{ item.groupName }}</span>
                <span class="user-tag">外部</span>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="search-con">
          <el-form inline>
            <el-form-item>
              <el-date-picker :editable="false" v-model="dateRange" type="daterange" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 280px" @change="getChartsData" class="header-search-select" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.msgType" clearable placeholder="聊天内容类型" class="header-search-select" @change="search">
                <el-option v-for="item in cheetList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="query.contact" placeholder="内容关键词" @change="search"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="chat-con" v-for="(item, index) in chatlist" :key="index">
          <template v-if="item.fromId === userId">
            <div class="right-chat chat-item">
              <div class="chat-block">
                <div class="chat-nick">
                  {{ chatForm.userName }}<span class="time">{{ item.msgTime }}</span>
                </div>
                <div class="chat-content">
                  <div class="text" v-show="item.msgType === 'text'">{{ item.contact }}</div>
                  <div class="img" v-show="item.msgType === 'image'">
                    <img :src="prefixUrl + item.contact">
                  </div>
                  <div v-show="item.msgType === 'file'"><a :href="prefixUrl + item.contact"></a></div>
                  <div v-show="item.msgType === 'mp3'">
                    <audio :src="prefixUrl + item.contact" autoplay loop></audio>
                  </div>
                  <div v-show="item.msgType === 'mp4'">
                    <video :src="prefixUrl + item.contact" width="100%" height="100%"></video>
                  </div>
                  <div v-show="item.msgType === 'emotion'">{{ item.contact }}</div>
                </div>
              </div>
              <div class="ava">
                <el-avatar shape="square" :size="36" :src="chatForm.friendsUrl"></el-avatar>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="left-chat chat-item">
              <div class="ava">
                <el-avatar shape="square" :size="36" :src="chatForm.friendsUrl"></el-avatar>
              </div>
              <div class="chat-block">
                <div class="chat-nick">
                  {{ chatForm.userName }}<span class="time">{{ item.msgTime }}</span>
                </div>
                <div class="chat-content">
                  <div class="text" v-show="item.msgType === 'text'">{{ item.contact }}</div>
                  <div class="img" v-show="item.msgType === 'image'">
                    <img :src="prefixUrl + item.contact">
                  </div>
                  <div v-show="item.msgType === 'file'"><a :href="prefixUrl + item.contact"></a></div>
                  <div v-show="item.msgType === 'mp3'">
                    <audio :src="prefixUrl + item.contact" autoplay loop></audio>
                  </div>
                  <div v-show="item.msgType === 'mp4'">
                    <video :src="prefixUrl + item.contact" width="100%" height="100%"></video>
                  </div>
                  <div v-show="item.msgType === 'emotion'">{{ item.contact }}</div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryWeUser,
  getCustomersByUserId,
  getGroupsByUserId,
  queryWeChatContactMsg
} from "@/api/riskControl/chat.js";

export default {
  data() {
    return {
      prefixUrl: window.globalConfig.IMAGE_API, // 地址前缀
      bondList: [],
      customerList: [],
      chatlist: [],
      chatForm: {   // 查看聊天消息用户信息
        userUrl: "",
        userName: "",
        friendsUrl: "",
        friendsName: "",
      },
      customer: "1",    // 1-好友 2-群聊
      userId: "",
      activedIndex1: null,  // 第一列选中时的样式
      nickName: "", // 好友群聊输入框内容
      activedIndex2: null,  // 好友群聊选中时的样式
      dateRange: [],  // 时间选择器
      // 聊天内容类型
      cheetList: [
        {
          dictValue: "text",
          dictLabel: "文本",
        },
        {
          dictValue: "image",
          dictLabel: "图片",
        },
        {
          dictValue: "file",
          dictLabel: "文件",
        },
        {
          dictValue: "mp3",
          dictLabel: "音频",
        },
        {
          dictValue: "mp4",
          dictLabel: "视频",
        },
        {
          dictValue: "weapp",
          dictLabel: "小程序",
        }
      ],
      query: {
        toList: "", // 和谁的聊天
        roomId: "", // 群id
        fromId: "", // 就是第一列的userid
        msgStartDate: "",
        msgEndDate: "",
        msgType: "", // 聊天内容类型
        contact: "",   // 内容关键词
      },
    };
  },

  watch: {
    customer(val) {
      if(val) {
        this.nickName = "";
      }
    }
  },

  mounted() {
    this.queryWeUser();
  },
  methods: {
    // 查询员工
    queryWeUser() {
      this.customerList = []
      queryWeUser().then((res) => {
        if (res.code === 200) {
          this.customerList = res.data;
        }
      })
    },
    // 更换:好友，群聊
    changeCustomer() {
      this.bondList = [];
      if (this.customer === '1') {
        this.getCustomersByUserId();
      } else {
        this.getGroupsByUserId();
      }
    },
    // 选择员工
    chooseUser(item, index) {
      this.userId = item.userId;
      this.activedIndex1 = index;
      this.chatForm.userUrl = item.avatar
      this.chatForm.userName = item.name
      this.changeCustomer();
    },
    // 查好友
    getCustomersByUserId() {
      let obj = {
        userId: this.userId,
        customerName: this.nickName
      }
      getCustomersByUserId(obj).then((res) => {
        if (res.code === 200) {
          this.bondList = res.data;
        }
      })
    },
    // 查群聊
    getGroupsByUserId() {
      let obj = {
        userId: this.userId,
        groupName: this.nickName
      }
      getGroupsByUserId(obj).then((res) => {
        if (res.code === 200) {
          this.bondList = res.data
        }
      })
    },
    // 选中日期
    getChartsData(e) {
      if (e) {
        this.query.msgStartDate = e[0];
        this.query.msgEndDate = e[1];
      } else {
        this.query.msgStartDate = "";
        this.query.msgEndDate = "";
      }
      this.search();
    },
    // 选中好友或群聊
    userBond(item, index) {
      if (this.customer === '1') {
        // 好友
        this.query.roomId = '';
        this.query.fromId = this.userId;
        this.query.toList = item.externalUserid || '';
      } else {
        // 群聊
        this.query.roomId = item.chatId || '';
        this.query.fromId = '';
        this.query.toList = '';
      }
      this.activedIndex2 = index;
      this.chatForm.friendsUrl = item.avatar;
      this.chatForm.friendsName = item.name;
      this.search();
    },
    // 查聊天记录
    search() {
      let obj = { ...this.query }
      this.chatlist = []
      queryWeChatContactMsg(obj).then((res) => {
        if (res.code === 200) {
          this.chatlist = res.data;
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.container {
  width: 100%;
  height: 550px;
  // max-height: 1000px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: stretch;

  .user-list {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    overflow-y: auto;

    .user-item {
      @include hidden-text;
      height: 70px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      cursor: pointer;

      .el-avatar {
        margin: 0 15px;
      }

      &.actived {
        background-color: fade-out($color: #082aff, $amount: 0.8);
      }

      &:hover {
        background-color: fade-out($color: #082aff, $amount: 0.8);
      }
    }
  }

  .customer-list {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;

    .top-con {
      text-align: center;
      background-color: #fff;
      width: 100%;
      height: 80px;

      // top: 0;
      .el-radio-group {
        margin: 8px auto;
      }

      .el-radio-button {
        ::v-deep .el-radio-button__inner {
          width: 109px;
        }
      }
    }

    .customer-con {
      height: 520px;
      overflow-y: auto;

      .customer-item {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        cursor: pointer;
        width: 224px;
        margin: auto;

        .user-name {
          text-align: left;
          margin: 0 5px 0 10px;
        }

        .group-name {
          background: #FF927F;
          border-radius: 4px;
          width: 40px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          // border: 1px solid #999;
          overflow: hidden; //超出隐藏
          white-space: nowrap; //不折行
          text-overflow: ellipsis; //溢出显示省略号
        }

        .user-company {
          @include hidden-text;
          color: #0bf592;
          font-size: 12px;
          display: inline-block;
          margin-left: 6px;
        }

        .user-tag {
          color: rgb(30, 113, 236);
          font-size: 10px;
          display: inline-block;
          margin-left: 6px;
          padding: 2px 8px;
          border-radius: 2px;
          border: 1px solid rgb(30, 113, 236);
        }

        &.actived {
          background-color: fade-out($color: #082aff, $amount: 0.8);
        }

        &:hover {
          background-color: fade-out($color: #082aff, $amount: 0.8);
        }
      }
    }
  }

  .chat-list {
    box-sizing: border-box;
    flex-grow: 1;
    overflow-y: auto;

    .search-con {
      width: 100%;
      height: 54px;
      border-bottom: 1px solid #eee;
    }

    .chat-con {
      width: 100%;
      height: auto;
      margin-bottom: 20px;

      .right-chat {
        display: flex;
        justify-content: flex-end;
        width: 48%;
        margin-left: 52%;

        .chat-nick {
          font-size: 12px;
          text-align: right;
          margin-right: 10px;
          margin-bottom: 6px;
        }

        .chat-content {
          position: relative;
          box-shadow: 0 0 20px #ddd;
          border-radius: 5px;
          padding: 8px 12px;
          text-align: left;
          margin-right: 12px;

          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 3px;
            right: -5px;
            width: 0;
            height: 0;
            border-left: 7px solid #fff;
            border-top: 7px solid transparent;
            border-bottom: 6px solid transparent;
          }
        }
      }

      .left-chat {
        display: flex;
        justify-content: flex-start;
        width: 48%;
        margin-bottom: 15px;

        .chat-nick {
          text-align: left;
          font-size: 12px;
          margin-left: 10px;
          margin-bottom: 6px;
        }

        .chat-content {
          position: relative;
          box-shadow: 0 0 20px #ddd;
          border-radius: 5px;
          padding: 8px 12px;
          text-align: left;
          margin-right: 12px;

          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 3px;
            left: -5px;
            width: 0;
            height: 0;
            border-right: 7px solid #fff;
            border-top: 7px solid transparent;
            border-bottom: 6px solid transparent;
          }
        }
      }

      .chat-item {
        .ava {
          width: 50px;
          margin-top: 10px;
        }

        .time {
          margin: 0 10px;
          color: #999;
        }
      }
    }
  }
}

::v-deep .el-tooltip {
  overflow: hidden; //超出隐藏
  white-space: nowrap; //不折行
  text-overflow: ellipsis; //溢出显示省略号
}

</style>
